菜菜菜的前端學習日誌 - Day7

對象

昨天講了Css Attribute，知道屬性怎麼寫了，除了直接撰寫在Html Tags上，其他2種方式該怎麼寫呢，接下來介紹如何指定對象～

Html 屬性

Html屬性有style，id，class，name...等

style前面有提到，是直接在標籤上撰寫Css屬性的地方

id="Andy"id是唯一值，就像是身分證字號一樣，不會存在相同的身分證字號
class="content"class是能夠重複的，通常透過使用class來改變Html Tags的樣式或其他行為，例如:有一群好想工作室的人(class)穿的衣服(Tags)都是綠色(樣式)的～

name="yesOrNo"用於對提交到伺服器後的表單數據進行標識
另<input type="radio">單選框是在同一個分組進行單選，這時需加上name="xxx"來進行分組

Css選擇器

那該怎麼指定它們呢？ 就用Css選擇器吧

首先先從剛剛上述提到的屬性選擇器開始

1. #aaa{
   //id選擇器，指定id為aaa的元素
   }

2. .aaa{
   //class選擇器，指定class為aaa的元素
   }

3. div{
   //元素選擇器，div可換為其他任何元素，例如:img，p，input，h1...等
   }

4. *{
   //星號標誌會指向頁面上所有的元素，常用在清除預設的屬性
   }

5. aa bb{
   //子對象選擇器，選擇在aa元素下面所有的bb元素
   }

6. aa>bb{
   //子對象選擇器，與第5項不同的是，他僅僅會選擇他直接的子層，白話一點就是他只管兒子不管孫子
   }

7. aa+bb{
   //相鄰兄弟選擇器，只會選擇aa相鄰的第一個b元素
   }

8. aa~bb{
   //相鄰兄弟選擇器，與第7項不同的是，他可以選擇所有的相鄰bb元素
   }

9. aa,bb{
   //選擇aa及bb元素
   }

10. .aa.bb{
    //選擇同時具有.aa及.bb的元素
    }

11. aa:nth-child(n){
    //選擇其父元素的第N個子元素
    }

12. aa:nth-last-child(n){
    //選擇其父元素的倒數第N個子元素
    }

13. aa:nth-of-type(n){
    //選擇其父元素的第N個a子元素
    }

14. aa:nth-last-of-type{
    //選擇其父元素的倒數第N個aa子元素
    }

15. aa:fist-child(n){
    //選擇其父元素的第1個子元素
    }

16. aa:last-child(n){
    //選擇其父元素的最後1個子元素
    }

17. aa:hover{
    //滑鼠游標移至aa元素時
    }

18. aa:visited{
    //造訪過的a連結樣式
    }

19. aa:active{
    //選擇中的a連結樣式
    }

20. aa:focus{
    //input選取輸入時
    }

21. aa:link{
    //還未訪問的a連結樣式
    }

22. aa::before{
    //在aa元素的內容之前插入內容
    //content: 'Hello'
    }

23. aa::after{
    //在aa元素的內容之後插入內容
    //content: 'Hello'
    }
    對於偽類:before 和:after 而言，屬性content 是必須設置的

    我這邊只是簡單的敘述一下常用到的選擇器
    如果想要在看更詳細一點的兒可以看一下Chris的文章

    前端新手村 CSS 簡單 Selector (上篇) & Groups
    前端新手村 CSS 的 簡單 Selector (中篇)
    前端新手村 CSS 的 簡單 Selector (下篇)